$(document).ready(function () {
    "use strict";
    
    var fish = {
        nwSize : 20, // 首行和尾行数据数量
        weSize : 18, // 左列和右列数据数量
        box : null,
        name : "?",
        index : 0, // 指明当前访问数据索引
        // 鱼模型数据，需事先设定后才能进行绘制
        data : [],
        // 根据this.data中数据绘制鱼模型
        // 参数：box -> JQueryObject，鱼模型所绘制的区域
        draw : function (box) {
            this.box = box;
            
            // 鱼模型分三行绘制，首行包含this.nwSize个数据，中间行分三列，
            // 左列和右列分别包含this.weSize个数据，中间列不包含任何数据。
            var northRow = this.createRow(),
                centerRow = this.createRow(),
                southRow = this.createRow();
            
            // 循环绘制行或列中数据的索引指示
            // 首行：this.nwSize
            // 左列：this.nwSize + this.weSize
            // 右列：this.nwSize + this.weSize + this.weSize
            // 末行：this.nwSize + this.weSize + this.weSize + this.nwSize
            var dataBlockIndex = this.nwSize;
            
            // 生成首行色块
            for (; this.index < dataBlockIndex; this.index++) {
                northRow.append(this.createBrick());
            }
            northRow.append(this.createClear());
            
            // 生成中间行色块
            var westCol = this.createCol(), // 左列
                eastCol = this.createCol(); // 右列
            
            dataBlockIndex += this.weSize;
            
            // 生成中间行中左列色块
            for (; this.index < dataBlockIndex; this.index++) {
                westCol.append(this.createBrick());
            }
            centerRow.append(westCol);
            
            // 生成中间行中中间列色块
            centerRow.append(this.createMiddle());
            
            dataBlockIndex += this.weSize;
            
            // 生成中间行中右列色块
            for (; this.index < dataBlockIndex; this.index++) {
                eastCol.append(this.createBrick());
            }
            centerRow.append(eastCol);
            centerRow.append(this.createClear());
            
            // 生成尾行色块
            dataBlockIndex += this.nwSize;
            for (; this.index < dataBlockIndex; this.index++) {
                southRow.append(this.createBrick());
            }
            southRow.append(this.createClear());
            
            // 将首行、中间行、尾行加入到鱼模型所需要绘制的区域
            box.empty();
            box.append(northRow).append(centerRow).append(southRow);
        },
        // 使用之前绘制时的this.box区域重新绘制鱼模型
        redraw : function () {
            this.box.empty();
            this.index = 0;
            this.draw(this.box);
        },
        // 生成行（首行、中间行、尾行）
        createRow : function () {
            return this.createDiv("row");
        },
        // 生成中间行中列（左列、右列）
        createCol : function () {
            return this.createDiv("col");
        },
        // 生成中间行中中间列
        createMiddle : function () {
            return this.createDiv("middle").append($("<span>").text(this.name));
        },
        // 生成色块，根据this.data中数据进行着色
        createBrick : function () {
            return this.createDiv("brick")
                .addClass("pull-left")
                .addClass(this.data[this.index] ? "black" : "white");
        },
        // 生成清空浮动用div，使外层嵌套div从视觉上包裹内层浮动div
        createClear : function () {
            return this.createDiv("clear");
        },
        // 生成div
        // 参数：cls -> String，div样式
        createDiv : function (cls) {
            return $("<div>").addClass(cls);
        }
    };
    
    // 绘制空鱼模型
    fish.draw($(".box"));
    
    // 全15种模型数据
    var fishes = [
        {
            id : 1,
            name : "长尾鲨",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,0,0,0,0,1,0,0, 0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0, 0,0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 2,
            name : "小丑鱼",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,0,0,1,0,1,0,0, 0,1,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0, 0,0,0,0,0,1,0,1,0,1,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 3,
            name : "座头鲸",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,1,0,1,0,0,0,0, 0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0, 0,0,1,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 4,
            name : "翻车鱼",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,1,0,1,0,0, 0,1,0,1,0,1,0,1,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0, 0,0,0,0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 5,
            name : "海豚",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0,0,0,0, 0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0, 0,0,1,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 6,
            name : "大白鲨",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0, 0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 7,
            name : "大章鱼",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,0,0,1,0,0,0,0, 0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0, 0,0,1,0,1,0,1,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 8,
            name : "虎鲸",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,1,0,0, 0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0, 0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 9,
            name : "沙蟹",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0,1,0,0, 0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,0, 0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 10,
            name : "蓝鲸",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,1,0,0, 0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,0, 0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 11,
            name : "鬼蝠魟",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0, 0,0,0,1,0,1,0,1,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,1,0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 12,
            name : "彩色水母",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0, 0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0, 0,0,1,0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 13,
            name : "飞鱼",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0,0, 0,1,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0, 0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 14,
            name : "狮子鱼",
            data : [0,0,0,1,0,1,0,0,0,1,0,0,0,1,0,1,0,1,0,0, 0,1,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0, 0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0]
        },
        {
            id : 15,
            name : "锤头双髻鲨",
            data : [0,0,0,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0, 1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,0,0, 0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0]
        }
    ];
    
    // 切换是否显示深海鱼介绍
    $("#toggle-img").on("click", function () {
        toggleImg();
    });
    
    // 生成鱼模型选择按钮组
    for (var i = 0; i < fishes.length; i++) {
        $(".control").append($("<button>").data("fish", fishes[i]).append(fishes[i].name).on("click", function () {
            fish.name = $(this).data("fish").name;
            fish.data = $(this).data("fish").data;
            fish.redraw();
            
            // 绘制介绍图片
            $(".img").empty().append($("<img>").attr({
                "src" : "images/" + $(this).data("fish").id + ".jpg",
                "width" : "100%"
            }));
            
            toggleImg();
        }));
    }
    
    var toggleImg = function () {
        $("#toggle-img").prop("checked") ? $(".img").show() : $(".img").hide();
    };
});
